<template>
	<view class="details" :style="{ padding: getPadding ? '32rpx' : '2rpx 32rpx' }">
		<view class="" v-for="{ field, label, slot, field1, encryption } in detalisList" :key="field">
			<template v-if="label == 'tittle'">
				<view class="text">{{ detalisData[field] }}</view>
			</template>
			<template v-else-if="label == 'content'">
				<view class="content font28">{{ detalisData[field] }}</view>
			</template>
			<template v-else-if="label == 'remark'">
				<view class="font28" style="padding: 16rpx">{{ detalisData[field] }}</view>
			</template>
			<template v-else-if="label == '附件'">
				<template v-if="uploadList.length">
					<view class="fuJIan left font28">{{ label }}</view>
					<view class="fuJianList">
						<view class="tu" v-for="(i, index) in uploadList" :key="i.url" @click="() => files.down(i.url)">
							<view
								class="imgDa"
								:style="`background:url(${config.getImage(uploadIcon[i.name.split('.').pop()] || 'pdf')})  no-repeat center / 100% 100%`"
							></view>
							<view class="cen">
								<view class="name font28">{{ i.name }}</view>
								<view class="daXiao font28">{{ (i.size / 1024 / 1024).toFixed(2) }}MB</view>
							</view>
							<view
								class="img"
								:style="{
									background: `url(${config.getImage('chaKan')}) no-repeat center / 100% 100%`
								}"
							></view>
						</view>
					</view>
				</template>
			</template>
			<template v-else>
				<view class="item" v-if="detalisData[field]">
					<template v-if="label">
						<view class="left font28">{{ label.replace('（选填）', '') }}</view>
						<template v-if="slot">
							<view class="right"><slot name="data" :data="{ data: detalisData[field], field }"></slot></view>
						</template>
						<view v-else class="right font28">
							{{
								encryption && detalisData.reportStatus == 1 ? config.encryptionChange(detalisData[field]) : detalisData[field] + (field1 ? detalisData[field1] : '')
							}}
						</view>
						<!-- <view class="">{{encryption }}{{detalisData.reportStatus}}</view> -->
					</template>
					<template v-else>
						<slot name="data" :data="{ data: detalisData[field], field }"></slot>
					</template>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
import files from 'utils/files.js';
import config from '@/config.js';
import { reactive } from 'vue';
const uploadIcon = {
	docx: 'docx',
	doc: 'docx',
	pdf: 'pdf',
	xlsx: 'xlsx',
	xls: 'xlsx'
};
const props = defineProps({
	detalisList: {
		type: Array,
		required: true
	},
	detalisData: {
		type: Object,
		required: true
	}
});
const uploadList = ref([]);
watch(
	() => props.detalisData,
	(newVal, oldVal) => {
		const upLoad = props.detalisList.find((item) => item.label == '附件');
		upLoad && newVal[upLoad.field] && (uploadList.value = files.formatFileStr(newVal[upLoad.field]));
	}
);
const getPadding = computed(() => !!props.detalisList.find((item) => item.label == 'tittle'));
</script>

<style lang="scss" scoped>
.details {
	background-color: #ffffff;
	margin: 0 32rpx;
	border-radius: 16rpx;
	.text {
		font-family: 'SourceHanSansTC, SourceHanSansTC';
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}
	.content {
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 16rpx;
	}
	.item {
		display: flex;
		margin: 32rpx 0;
		.left {
			width: 206rpx;
			margin-right: 40rpx;
		}
		.right {
			width: 650rpx;
			line-break: anywhere;
			color: #222222;
		}
	}
}
.fuJIan {
	margin-top: 32rpx;
}
.fuJianList {
	margin-top: 8rpx;
}
.tu {
	display: flex;
	align-items: center;
	border-radius: 20rpx;
	border: 2rpx solid #f3f3f3;
	margin-bottom: 16rpx;
}
.img {
	width: 48rpx;
	height: 48rpx;
}
.imgDa {
	width: 132rpx;
	height: 132rpx;
}
.cen {
	width: 386rpx;
	margin-left: 32rpx;
	.name {
		color: #222222;
		margin-bottom: 16rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.daXiao {
		font-size: 24rpx;
	}
}
</style>
